// 双向绑定指令
<template>
  <div class="test4">
    <h3>双向绑定指令</h3>
    <div>v-model演示：</div>
    <!-- v-model:双向绑定指令。配合表单元素使用（例如：input、textarea、select） -->
    <!-- v-model:当表单数据改变时，会将对应的数据值修改；当数据值改变时，会将表单对应数据修改 -->
    <p>用户姓名：{{ name }}</p>
    <input type="text" v-model="name" />
    <hr />
    <button @click="updateName">修改name</button>
    <hr />

    <div>v-model修饰符演示：</div>
    <!-- v-model修饰符: .number、.trim、.lazy -->
    <input type="text" v-model.number="n1" /> +
    <input type="text" v-model.number="n2" /> =
    <span>{{ n1 + n2 }}</span>
    <hr />

    <input type="text" v-model.trim="name" />
    <hr />

    <input type="text" v-model.lazy="name" />
    <hr />
  </div>
</template>

<style lang="scss">
.test4 {
  color: black;
  h3 {
    color: red;
  }
  div {
    color: blue;
  }
}
</style>

<script>
export default {
  name: "Test4",
  // data对象是要渲染到页面上的数据
  data() {
    return {
      name: "张三",
      n1: 1,
      n2: 2,
    };
  },
  methods: {
    updateName() {
      this.name = "王五";
    },
  },
};
</script>
